import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Row, Col, Button, Spin, message, Select } from 'antd';
import request from '@/utils/request';
import styles from '../index.less';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const formItemLayout1 = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 24 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 24 },
  },
};

function AddJumpConfig({ visiable, close, form, flowNodeId, queryTable }) {
  const { getFieldDecorator } = form;
  const [result, setResult] = useState([]);
  const [loading, setLoading] = useState(false);

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;
      setLoading(true);
      request('pmc/pms/PmOrderFlowJumpController/add', {
        data: {
          nextTacheCode: value.nextTacheCode,
          jumpParam: value.params,
          flowNodeId,
        },
      })
        .then(res => {
          if (res.success) {
            message.success('新增跃迁成功！');
            close();
            queryTable();
          } else {
            message.error(res.errMessage);
          }
        })
        .always(() => {
          setLoading(false);
        });
    });
  };

  useEffect(() => {
    setLoading(true);
    request('pmc/pms/PmOrderFlowNodeController/queryCanJumpList', {
      data: {
        flowNodeId,
      },
    })
      .then(res => {
        if (res.success) {
          setResult(res.data);
        } else {
          message.error(res.errMessage);
        }
      })
      .always(() => setLoading(false));
  }, []);

  const createParams = () => {
    const left = form.getFieldValue('left');
    const yunsuan = form.getFieldValue('yunsuan');
    const right = form.getFieldValue('right');
    const value = `{$${left}$${yunsuan}'${right}'}`;
    let paramsValue = form.getFieldValue('params');
    if (!paramsValue) {
      paramsValue = '';
    }
    form.setFieldsValue({ params: `${paramsValue}${value}` });
  };

  const Addyunsuan = type => {
    let paramsValue = form.getFieldValue('params');
    if (!paramsValue) {
      paramsValue = '';
    }
    form.setFieldsValue({ params: `${paramsValue}${type}` });
  };

  return (
    <Modal
      title="新增跃迁设置"
      width="600px"
      destroyOnClose
      onCancel={close}
      visible={visiable}
      onOk={onSubmit}
    >
      <Spin spinning={loading}>
        <Form>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item label="下一环节">
                {getFieldDecorator('nextTacheCode', {
                  rules: [
                    {
                      required: true,
                      message: '下一环节不能为空',
                    },
                  ],
                })(
                  <Select placeholder="请选择">
                    {result.map(item => (
                      <Select.Option key={item.flowNodeCode}>{item.flowNodeName}</Select.Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16} className={styles.label_left}>
            <Col span={8}>
              <Form.Item label="左表达式" {...formItemLayout1}>
                {getFieldDecorator('left')(<Input placeholder="请输入" />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="操作符" {...formItemLayout1}>
                {getFieldDecorator('yunsuan', {
                  initialValue: '等于',
                })(
                  <Select>
                    <Select.Option key="等于">等于</Select.Option>
                    <Select.Option key="大于">大于</Select.Option>
                    <Select.Option key="大等于">大等于 </Select.Option>
                    <Select.Option key="小于">小于</Select.Option>
                    <Select.Option key="小等于"> 小等于 </Select.Option>
                    <Select.Option key="不等于">不等于</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="右表达式" {...formItemLayout1}>
                {getFieldDecorator('right')(<Input placeholder="请输入" />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <a
                onClick={() => {
                  createParams();
                }}
              >
                {' '}
                + 添加生成表达式
              </a>
              <span className="margin-left">
                <span>( 关联条件：</span>
                <Button
                  size="small"
                  onClick={() => {
                    Addyunsuan('AND');
                  }}
                  className="margin-right"
                >
                  AND
                </Button>
                <Button
                  size="small"
                  onClick={() => {
                    Addyunsuan('OR');
                  }}
                  className="margin-right"
                >
                  OR
                </Button>
                <Button
                  size="small"
                  onClick={() => {
                    Addyunsuan('(');
                  }}
                  className="margin-right"
                >
                  (
                </Button>
                <Button
                  size="small"
                  onClick={() => {
                    Addyunsuan(')');
                  }}
                  className="margin-right"
                >
                  )
                </Button>
                <span>)</span>
              </span>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24} className="margin-top">
              <Form.Item>
                {getFieldDecorator('params')(<Input.TextArea rows={3} placeholder="表达式生成" />)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Spin>
    </Modal>
  );
}

export default Form.create()(AddJumpConfig);
